<template>
  <div class="card" data-state="#about">
    <div class="card-header">
      <div
        class="card-cover"
        :style="{
          'background-image': `url(${HttpManager.attachImageUrl(
            details.data[`avator`]
          )})`,
        }"
      ></div>
      <img
        class="card-avatar"
        :style="{
          'background-image': `url(${HttpManager.attachImageUrl(
            details.data[`avator`]
          )})`,
        }"
      />
      <h1 class="card-fullname">{{ details.data["username"] }}</h1>
      <h2 class="card-jobtitle">UI Developer</h2>
    </div>
    <div class="card-main">
      <div class="card-section is-active f-container" id="about">
        <div class="f-button" v-if="isMe">
          <input
            type="checkbox"
            :checked="checked"
            id="favorite"
            name="favorite-checkbox"
            value="favorite-button"
          />
          <label for="favorite">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="feather feather-heart"
            >
              <path
                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
              ></path>
            </svg>
            <div class="action">
              <span class="option-1">关注</span>
              <span class="option-2">取消关注</span>
            </div>
          </label>
        </div>

        <div class="card-content">
          <div class="card-subtitle">介绍</div>
          <p class="card-desc">
            {{ details.data["introduction"] }}
          </p>
        </div>
      </div>
      <div class="card-section" id="experience">
        <song-list
          class="album-body"
          :songList="collectSongList"
          :isFav="true"
        ></song-list>
      </div>
      <div class="card-buttons">
        <button data-section="#about" class="is-active button">用户信息</button>
        <button data-section="#experience " class="button">收藏歌曲</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import {
  defineComponent,
  toRefs,
  ref,
  onMounted,
  getCurrentInstance,
  computed,
  onBeforeMount,
  reactive,
} from "vue";
import { HttpManager } from "@/api";
import { formatDate } from "@/utils";
import "@icon-park/vue/styles/index.css";
import { useStore } from "vuex";
import SongList from "@/components/SongList.vue";

export default defineComponent({
  props: ["userId"],
  emits: ["closeDetail"],
  components: {
    SongList,
  },
  setup(props) {
    const { userId } = toRefs(props);
    let details = reactive({ data: {} });
    const checked = ref(true);
    const { proxy } = getCurrentInstance();
    //是否显示关注
    const isMe =
      userId.value != proxy.$store.getters.userId && proxy.$store.getters.token;
    async function getDetail(id) {
      const result = (await HttpManager.getUserOfId(id)) as ResponseBody;
      details.data = result.data[0];
    }

    const collectSongList = ref([]); // 收藏的歌曲
    const store = useStore();
    // 获取收藏的歌曲
    async function getCollection(userId) {
      collectSongList.value = [];
      const result = (await HttpManager.getCollectionOfUser(
        userId
      )) as ResponseBody;
      const collectIDList = result.data || []; // 存放收藏的歌曲ID
      // 通过歌曲ID获取歌曲信息
      for (const item of collectIDList) {
        const result = (await HttpManager.getSongOfId(
          item.songId
        )) as ResponseBody;
        collectSongList.value.push(result.data[0]);
      }
    }

    // const subscribers = ref([]);
    // // 获取所有关注者
    // async function getAllSubscribers(Id) {
    //   const result = (await HttpManager.getAllSubscribers(Id)) as ResponseBody;
    //   subscribers.value = result.data;
    //   let has = false;
    //   for (let i = 0; i < subscribers.value.length; i++) {
    //     console.log("关注者信息" + subscribers[i].id == "38");
    //     if (subscribers.value[i] == userId) has = true;
    //   }
    // }

    onBeforeMount(async () => {
      await getDetail(userId.value);
      // console.log("细节是" + details.data["avator"]);
      await getCollection(userId.value);
      // console.log(collectSongList.value);
      // await getAllSubscribers(proxy.$store.getters.userId);
    });

    //切换特效
    onMounted(() => {
      const buttons = document.querySelectorAll(".card-buttons button");
      const sections = document.querySelectorAll(".card-section");
      const card = document.querySelector(".card");

      const handleButtonClick = (e) => {
        const targetSection = e.target.getAttribute("data-section");
        const section = document.querySelector(targetSection);
        targetSection !== "#about"
          ? card.classList.add("is-active")
          : card.classList.remove("is-active");
        card.setAttribute("data-state", targetSection);
        sections.forEach((s) => s.classList.remove("is-active"));
        buttons.forEach((b) => b.classList.remove("is-active"));
        e.target.classList.add("is-active");
        section.classList.add("is-active");
      };

      buttons.forEach((btn) => {
        btn.addEventListener("click", handleButtonClick);
      });
    });

    return {
      proxy,
      // subscribers,
      details,
      HttpManager,
      collectSongList,
      checked,
      isMe,
    };
  },
});
</script>

<style lang="scss" src="../../assets/css/consumerDetail.scss" scoped></style>
